<template>
  <van-loading v-if="isLoading" type="spinner"></van-loading>
  <van-icon
    :color="value ? '#5094f3' : '#777'"
    :name="value ? 'star' : 'star-o'"
    v-else
    @click="collectHandler"
  />
</template>

<script>
import { addArticleCollectApi, deleteArticleCollectApi } from "@/api/article";

export default {
  //   name: ColloctUser,
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    articleId: {
      type: [Boolean, String],
      required: true,
    },
  },
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    async collectHandler() {
      //判断是否登录
      if (!this.$store.getters.token) return this.$toast.fail("请登录");
      //已经登录
      this.isLoading = true;
      try {
        if (this.value) {
          //已收藏,取消收藏
          await deleteArticleCollectApi(this.articleId);
        } else {
          //未收藏,则执行收藏
          await addArticleCollectApi({
            target: this.articleId,
          });
        }
        //提示成功
        this.$toast.success(this.value ? "取消收藏成功" : "收藏成功");
        //视图的更新
        this.$emit("input", !this.value);
      } catch (error) {
        this.$toast.fail("操作失败");
        console.log(error);
      }
      this.isLoading = false;
    },
  },
};
</script>

<style></style>
